<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <title>Title</title>
    <style>
        .content{
            clear: both;
            overflow: hidden;
            margin: auto;
        }
        .person{
            float: left;
            width: 30%;
            margin: 0 1.6%;
            border: 1px solid #000000;
            height: 750px;
        }
        .border{
            border: 1px solid #000000;
        }
        a{
            text-decoration:none;
            color:#e71818
        }
        .name{
            text-align: center;
            border-bottom: 1px solid #000000;
            height: 30px;
            line-height:30px;
            overflow:hidden;
        }
        .channel{
            clear: both;
            overflow: hidden;
            height: 30px;
            line-height:30px;
            overflow:hidden;
            border-bottom: 1px solid #000000;
        }
        .changeSubscribe{
            float: right;
            margin-right: 15px;
        }
        .channel span{
            float: left;
            margin-left: 15px;
        }
        .text{
            margin-top: 15px;
            margin-left: 5%;
            width: 90%;
            height: 50px;
        }
        .messageList{
            margin-top: 15px;
            margin-left: 5%;
            width: 90%;
            height: 200px;
        }
        .button{
            margin-top: 10px;
            margin-bottom: 10px;
            margin-right: 20px;
            text-align: right;
        }
        .messageBox{
            border-bottom: 1px solid #000000;
            height: 275px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="content">
    <div style="display: none" data-userId = "0" id="userId"></div>
    <div class="person">

        <div>
            <div class="name">
                频道
            </div>

            <div class="channel">
                <span>频道1</span><a class="changeSubscribe" href="javascript:;" id="channel1" data-channelId="1" data-subscribe="1" onclick="changeSubscribe(this)"><i class="fa fa-plus" aria-hidden="true"></i>已订阅</a>
            </div>
            <div class="channel">
                <span>频道2</span><a class="changeSubscribe" href="javascript:;" id="channel2" data-channelId="2" data-subscribe="1" onclick="changeSubscribe(this)"><i class="fa fa-plus" aria-hidden="true"></i>已订阅</a>
            </div>
        </div>
        <div class="messageBox">
            <div class="name">
                服务收到消息列表
            </div>
            <div id="message1">

            </div>
        </div>
        <div style="border-bottom: 1px solid #000000;">
            <div style="text-align: center;height: 30px;line-height: 30px;">
                <span>频道1</span>
            </div>
            <div>
                    <textarea class="text" id="text1">

                    </textarea>
            </div>
            <div class="button">
                <button onclick="sendMessage(this)" data-channelId="1">发送消息</button>
            </div>

        </div>

        <div style="margin-top: 20px;">
            <div style="text-align: center;height: 30px;line-height: 30px;">
                <span>频道2</span>
            </div>
            <div>
                    <textarea class="text" id="text2">

                    </textarea>
            </div>
            <div class="button">
                <button onclick="sendMessage(this)" data-channelId="2">发送消息</button>
            </div>

        </div>

    </div>




</div>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script>


    function changeSubscribe(e){
        var userId = document.getElementById('userId').getAttribute("data-userId");
        var channelId = parseInt(e.getAttribute("data-channelId"));
        var isSubscribe = parseInt(e.getAttribute("data-subscribe"));
        $.ajax({
            //请求方式
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/changeSubscribe",
            //数据，json字符串
            data: JSON.stringify({userId:userId,channelId:channelId,isSubscribe:isSubscribe}),
            //请求成功
            success: function (result) {
                if(result.status == 200){
                    alert("操作成功！")
                }
                if(isSubscribe == 1){
                    e.setAttribute("data-subscribe",0);
                    $(e).html("订阅")
                }else{
                    e.setAttribute("data-subscribe",1);
                    $(e).html("已订阅")
                }

            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });


    }


    function sendMessage(e) {
        var channelId = parseInt(e.getAttribute("data-channelId"));
        var userId = document.getElementById('userId').getAttribute("data-userId");
        channel="channel"+channelId;
        console.log(channel);
        var isSubscribe = document.getElementById(channel).getAttribute("data-subscribe");
        console.log(isSubscribe);
        if(isSubscribe == '0'){
            alert("您已取消关注！");
            return ;
        }


        var text;
        if(channelId == 1){
            text = $("#text1").val()
        }else{
            text = $("#text2").val()
        }
        console.log(text)
        $.ajax({
            //请求方式
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/sendMessage",
            //数据，json字符串
            data: JSON.stringify({userId:userId,channelId:channelId,text:text}),
            //请求成功
            success: function (result) {
                if(result.status == 200){
                    alert("发送成功！")
                }

                socket.emit('notice', text);
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }
    var socket = io('/roomName');
    // socket.emit('msg', 'hello');
    var s2 = io("/chat");
    socket.on('reply', function (msg) {

        console.log(msg);
        $('#message1').append($('<li>').text(msg));
    });

    s2.emit('msg', 'hello', function (data) {

        var getId = document.getElementById('userId');
        getId.setAttribute("data-userId",data);

    });











</script>


</body>
</html>